<script lang="ts" setup>
import { ref } from "vue";
import canvasBackground from "./../components/canvasBackground.vue";
import canvasClickEffice from "./../components/canvasClickEffice.vue";
import messageBox from "./../components/message-box.vue";
import ResizeManager from "../manager/resizeManager";
import layout from "./layout/index.vue";
import { webConfig } from "../tools/webConfig";



const rootDiv = ref();
const rootDiv_MousemoveEvent = () => {
    showTime = 0;
};

const backImageUrl = ref();
webConfig.get().then(res => {
    backImageUrl.value = `url(../../public/Images/background/${res.background.viewBackImageName})`;
});


//#region canvasBackground-Dom
let showTime = 0;
let setTimeAction: number | null = null;
const canvasComShow = ref(true);
const canvasComIsShow = (show: boolean) => {
    canvasComShow.value = show;
    ResizeManager.del('canvasBackground');
    if (!show) {
        // 开启定时器
        setTimeAction = setInterval(() => {
            if (showTime++ > 30) {
                canvasComShow.value = true;
                clearInterval(setTimeAction!);
            }
        }, 2000);
    }
}
//#endregion

canvasComIsShow(false);


//#region canvasClickEffice-Dom
const canvasClickEfficeDom = ref();
const rootDiv_ClickEvent = (e: any) => {
    canvasClickEfficeDom.value.effect_ClickEvent(e.clientX, e.clientY);
}
//#endregion


</script>

<template>
    <div ref="rootDiv" class="views-root" @mousemove="rootDiv_MousemoveEvent" @click="rootDiv_ClickEvent">

        <canvasClickEffice ref="canvasClickEfficeDom"></canvasClickEffice>

        <message-box></message-box>

        <layout></layout>

        <canvasBackground v-if="canvasComShow" @isShow="canvasComIsShow"></canvasBackground>
    </div>
</template>

<style scoped>
.views-root {
    width: 100wh;
    height: 100vh;
    overflow: hidden;
    /* pointer-events: none; */
    /* background-color: rgba(200, 200, 200, 1); */
    background-image: v-bind(backImageUrl);
    background-size: cover;
    background-attachment: fixed;
    background-color: #4cbbb9;
    background-position: center center;
}

.back-div {
    background-color: white;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
}
</style>
